import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Pagination } from '../components/Pagination';
import { FilterTabs } from '../components/FilterTabs';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function Security() {
  usePageTitle('Home Security Appliances');
  
  const [currentPage, setCurrentPage] = useState(1);
  const [activeCategory, setActiveCategory] = useState('All Products');
  const categories = ['All Products', 'Smart Locks', 'Cameras', 'Doorbells', 'Sensors'];
  const allProducts = [{
    id: 'security-1',
    name: 'Nest x Yale Smart Lock',
    image: 'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Smart Locks',
    description: 'Keyless entry with remote access control and integration with Google Home.',
    price: '$279'
  }, {
    id: 'security-2',
    name: 'Ring Video Doorbell Pro 2',
    image: 'https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Doorbells',
    description: '3D motion detection with head-to-toe video and enhanced audio quality.',
    price: '$249'
  }, {
    id: 'security-3',
    name: 'Arlo Pro 4 Security Camera System',
    image: 'https://images.unsplash.com/photo-1580745294621-1d791f60ef5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Cameras',
    description: 'Wire-free 2K HDR cameras with color night vision and 160° viewing angle.',
    price: '$549'
  }, {
    id: 'security-4',
    name: 'August Wi-Fi Smart Lock',
    image: 'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Smart Locks',
    description: 'Retrofits to existing deadbolts with built-in Wi-Fi and auto-unlock feature.',
    price: '$229'
  }, {
    id: 'security-5',
    name: 'Google Nest Cam (Battery)',
    image: 'https://images.unsplash.com/photo-1580745294621-1d791f60ef5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Cameras',
    description: 'Wire-free installation with intelligent alerts and 3 hours of event history.',
    price: '$179'
  }, {
    id: 'security-6',
    name: 'SimpliSafe Sensor Kit',
    image: 'https://images.unsplash.com/photo-1585909695284-32d2985ac9c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Sensors',
    description: 'Entry, motion, and environmental sensors with professional monitoring options.',
    price: '$199'
  }, {
    id: 'security-7',
    name: 'Eufy Video Doorbell 2K',
    image: 'https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Doorbells',
    description: 'No monthly fees with local storage and AI-powered person detection.',
    price: '$169'
  }, {
    id: 'security-8',
    name: 'Level Touch Smart Lock',
    image: 'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Smart Locks',
    description: 'Invisible design that replaces your entire lock with touch and key card access.',
    price: '$329'
  }];
  // Filter products by category
  const filteredProducts = activeCategory === 'All Products' ? allProducts : allProducts.filter(product => product.category === activeCategory);
  // Pagination logic
  const productsPerPage = 6;
  const totalPages = Math.ceil(filteredProducts.length / productsPerPage);
  const currentProducts = filteredProducts.slice((currentPage - 1) * productsPerPage, currentPage * productsPerPage);
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo(0, 0);
  };
  const handleCategoryChange = (category: string) => {
    setActiveCategory(category);
    setCurrentPage(1);
  };
  return <div className="w-full">
      {/* Hero section */}
      <div className="relative w-full h-80 bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1585909695284-32d2985ac9c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")'
    }}>
        <div className="absolute inset-0 bg-black bg-opacity-50"></div>
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              Home Integrity
            </h1>
            <p className="text-xl text-white max-w-xl">
              Protect what matters most with intelligent security solutions for
              the modern home.
            </p>
          </div>
        </div>
      </div>
      {/* Filter tabs */}
      <FilterTabs categories={categories} activeCategory={activeCategory} onCategoryChange={handleCategoryChange} />
      {/* Featured products */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">
            Featured Security Appliances
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {currentProducts.map(product => <div key={product.id} className="bg-[#f8f9fa] rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                <ImageWithLoader src={product.image} alt={product.name} className="w-full h-56 object-cover" />
                <div className="p-6">
                  <div className="mb-2">
                    <span className="bg-[#e9ecef] text-[#343a40] text-xs px-2 py-1 rounded">
                      {product.category}
                    </span>
                  </div>
                  <h3 className="font-bold text-xl mb-2">{product.name}</h3>
                  <p className="text-gray-600 mb-4">{product.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xl font-semibold">
                      {product.price}
                    </span>
                    <Link to={`/product/${product.id}`} className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-4 py-2 rounded-md transition-colors">
                      View Details
                    </Link>
                  </div>
                </div>
              </div>)}
          </div>
          {/* Pagination */}
          {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />}
        </div>
      </section>
      {/* Security solutions */}
      <section className="py-16 bg-[#e9ecef]">
        <div className="container mx-auto px-4">
          <div className="bg-white rounded-lg shadow-lg overflow-hidden">
            <div className="md:flex">
              <div className="md:w-1/2">
                <ImageWithLoader src="https://images.unsplash.com/photo-1558959356-2d5a2517b7b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Smart home security" className="h-full w-full object-cover" />
              </div>
              <div className="p-8 md:w-1/2">
                <h2 className="text-3xl font-bold mb-4">
                  Complete Home Security Solutions
                </h2>
                <p className="text-gray-600 mb-6">
                  Our expertly curated security products work together to create
                  a comprehensive shield for your home, providing peace of mind
                  whether you're at home or away.
                </p>
                <ul className="space-y-3 mb-6">
                  <li className="flex items-start">
                    <span className="text-[#d4a373] font-bold mr-2">✓</span>
                    <span>
                      Seamless integration with existing smart home systems
                    </span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-[#d4a373] font-bold mr-2">✓</span>
                    <span>
                      Real-time alerts and notifications on your mobile devices
                    </span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-[#d4a373] font-bold mr-2">✓</span>
                    <span>
                      Professional monitoring options available for enhanced
                      security
                    </span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-[#d4a373] font-bold mr-2">✓</span>
                    <span>
                      Simple DIY installation with expert support when needed
                    </span>
                  </li>
                </ul>
                <Link to="/guides" className="bg-[#343a40] hover:bg-black text-white px-6 py-3 rounded-md font-medium transition-colors inline-block">
                  Explore Security Guide
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>;
}